<!DOCTYPE html>
<html lang="en" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:th="http://www.thymeleaf.org"
>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/custom.form.css">


</head>
<body>
<!--新增表单-->
<div class="panel panel-default operation" hidden>
    <div class="panel-heading title"></div>
    <div class="layui-card-body">
        <form class="layui-form " action="" lay-filter="info" style="width: 700px;margin-top: 10px">
            <!--            <input name="id" hidden/>-->

            <div class="layui-form-item">
                <label class="layui-form-label" id="names">姓名</label>
                <div class="layui-input-block">
                    <input type="beanName" name="name" placeholder="请输入姓名" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-block">
                    <input type="params" name="email" id="emails" placeholder="请输入邮箱" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">电话</label>
                <div class="layui-input-block">
                    <input type="cronExpression" id="phones" name="phone" placeholder="请输入电话"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <!--            <div class="layui-form-item">-->
            <!--                <label class="layui-form-label">时间选择</label>-->
            <!--                <div class="layui-input-inline">-->
            <!--                    <input type="text" class="layui-input" id="laydate" placeholder="yyyy-MM-dd" lay-key="1">-->
            <!--                </div>-->
            <!--            </div>-->
            <div class="layui-form-item">
                <div class="layui-input-inline ">
                    <button type="button" class="layui-btn" id="uploads" shiro:hasPermission="resume:add">
                        <i class="layui-icon">&#xe67c;</i>上传文件
                    </button>
                    <div class="layui-upload-list">
                        <input type="hidden" id="url" name="url">
                        <img class="layui-upload" id="demo1"
                             style="width: 100px;height: 100px;position: relative;left: 110px">
                        <p id="demoText"></p>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="submit">保存</button>
                    <button class="layui-btn layui-btn-primary" id="btn_cancel">返回</button>
                </div>
            </div>
        </form>
    </div>
</div>
<div class="table_div">
    <!--模糊查询搜索框-->
    <div id="searchParam" shiro:hasPermission="resume:list">

        <div class="layui-form-item">

            <div class="layui-input-inline" style="float: left">
                <input type="text" id="name" class="layui-input" autocomplete="off" placeholder="请输入姓名">
            </div>
            <div class="layui-input-inline" style="float: left">
                <input type="text" id="email" class="layui-input" autocomplete="off" placeholder="请输入邮箱">
            </div>
            <div class="layui-input-inline" style="float: left">
                <input type="text" id="phone" class="layui-input" autocomplete="off" placeholder="请输入电话">
            </div>
            <div class="layui-input-inline" style="float: left">
                <input type="text" id="creatTime" class="layui-input" autocomplete="off" placeholder="请输入时间">
            </div>
            <div class="layui-input-inline ">
                <button class="layui-btn layuiadmin-btn-list" id="search" lay-submit=""
                        lay-filter="LAY-app-contlist-search">
                    <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                </button>
            </div>
        </div>
    </div>

    <div class="dept-table">
        <table class="layui-table" id="deptTable" lay-filter="deptTable" lay-data="{id:'tables'}"></table>
    </div>
</div>
<!--头部的操作栏-->
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal" lay-event="add" shiro:hasPermission="resume:add">添加</button>
        <button class="layui-btn layui-btn-btn" lay-event="batchDeleted" shiro:hasPermission="resume:delete">批量删除
        </button>
        <button class="layui-btn layui-btn-danger layui-btn-sm" style="float: right" lay-event="jobLog" id="exports">
            批量下载
        </button>
        <button class="layui-btn layui-btn-warm layui-btn-sm" style="float: right" lay-event="jobLog">已下载列表</button>
    </div>
</script>
<!--中间的操作栏-->
<script type="text/html" id="combo-state">
    <x class="layui-bth layui-bth-warm layui-btn-xs" lay-event="previews" >预览</x>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" shiro:hasPermission="resume:delete" lay-event="del">删除</a>
</script>

<script src="/layui/layui.all.js"></script>
<script src="/js/core.util.js"></script>
<script th:inline="none">
    var IP = "http://localhost:8080/"
    //获取token
    var token = CoreUtil.getData("access_token");
    //地址栏转义token中的#号
    var tokenQuery = token.replace("#", "%23");
    var table = layui.table;
    var tableIns;
    var $ = jQuery = layui.jquery;

    layui.use(['table', 'layer', 'form', 'upload'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var upload = upload = layui.upload;
        let renderTable = function () {
            let name = $('#name').val();
            let phone = $('#phone').val();
            let email = $('#email').val();
            tableIns = table.render({
                elem: '#deptTable',
                url: IP + 'resume/list',
                headers: {"authorization": token},
                page: true,
                id: 'queryList',
                where: {name: name, email: email, phone: phone},
                limit: 10,
                limits: [10, 20, 30,50,100,500,1000],
                contentType: 'application/json',
                toolbar: '#toolbar',
                method: "Post",
                cols: [[
                    {type: 'checkbox', fixed: 'left'},
                    {field: 'id', width: 60, align: 'center', title: 'id', sort: true},
                    {field: 'name', title: '姓名'},
                    {field: 'email', title: '邮箱'},
                    {field: 'phone', title: '电话'},
                    {field: 'createTime', title: '时间'},
                    {title: '操作', toolbar: '#combo-state'}
                ]],
                parseData: function (res) {
                    console.log(res);
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": CoreUtil.isEmpty(res.data) ? 0 : res.data.total, //解析数据长度
                        "data": CoreUtil.isEmpty(res.data) ? null : res.data.records //解析数据列表
                    }
                }
            })
        };

        renderTable()

        //模糊查询
        $('#search').click(function () {
            renderTable();
        });


        //执行文件上传实例
        var uploadInst = upload.render({
            elem: '#uploads', //绑定元素
            title: '上传文件',
            url: IP + '/resume/upload?authorization=' + tokenQuery,  //上传接口
            headers: {"authorization": token},
            auto: true, //选择文件后不自动上传
            drag: false, //是否接受拖拽的文件上传，设置 false 可禁用
            exts: 'jpg|png|gif|doc|docx|jpeg|xls|xlsx|html|xls|pdf', //支持这几种格式的上传。注意是用|分割。

            before: function (obj) {
                // layer.load(); //上传loading
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $(".layui-upload-img").remove();
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                console.log(res);
                console.log(res.data.previewUrl)
                $('#url').val(res.data.previewUrl);   //将返回的url填充到这里
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                //上传成功
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });
        //表头工具
        table.on('toolbar(deptTable)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'batchDeleted':
                    var data = checkStatus.data;
                    if (data.length == 0) {
                        layer.msg("请选择要批量删除的数据");
                    } else {
                        var ids = [];
                        $(data).each(function (index, item) {
                            ids.push(item.id);
                        });
                        tipDialog(ids);

                    }
                    break;
                case 'add':
                    $(".table_div").hide();
                    $(".operation").show();
                    $(".title").html("新增");
                    $(".operation input[name=id]").val("");
                    $(".operation input[name=names]").val("");
                    $(".operation input[name=emails]").val("");
                    $(".operation input[name=phones]").val("");
                    $(".operation input[name=url]").val("");
                    $(".operation input[name=creatTime]").val("");
                    break;
            }
            ;
        });
        //列操作
        table.on('tool(deptTable)', function (obj) {
            var data = obj.data;
            switch (obj.event) {
                case 'del':
                    var ids = [];
                    ids.push(data.id);
                    tipDialog(ids);
                    break;
                case 'edit':
                    $(".table_div").hide();
                    $(".operation").show();
                    $(".title").html("修改");
                    $(".operation input[name=id]").val(data.id);
                    $(".operation input[name=names]").val(data.name);
                    $(".operation input[name=emails]").val(data.email);
                    $(".operation input[name=phones]").val(data.phone);
                    $(".operation input[name=url]").val(data.url);
                    $(".operation input[name=createTime]").val(data.createTime);
                    break;
                case 'previews':
                    var id = [];
                    id.push(data.id);
                    openPdf(id);
                    break;
            }
        });


        //删除
        var tipDialog = function (ids) {
            layer.open({
                content: "确定要删除么?",
                yes: function (index, layero) {
                    layer.close(index); //如果设定了yes回调，需进行手工关闭
                    CoreUtil.sendDelete("/resume/delete", ids, function (res) {
                        layer.msg(res.msg, {time: 1000}, function () {
                            layer.msg(res.msg);
                            Search();
                        });
                    });
                }

            });

        };

        // //删除
        // var preview = function (ids) {
        //     layer.open({
        //         content: "确定要删除么?",
        //         yes: function (index, layero) {
        //             layer.close(index); //如果设定了yes回调，需进行手工关闭
        //             CoreUtil.sendDelete("/resume/delete", ids, function (res) {
        //                 layer.msg(res.msg, {time: 1000}, function () {
        //                     layer.msg(res.msg);
        //                     Search();
        //                 });
        //             });
        //         }
        //
        //     });
        //
        // };
        //搜索查询
        function Search() {

            renderTable.reload({
                where: { //设定异步数据接口的额外参数，任意设
                    // id: $("#id").val(),
                    name: $("#names").val(),
                    email: $("#emails").val(),
                    phone: $("#phones").val(),
                    createTime: $("#createTime").val(),
                }
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        };

        //新增执行查询
        function SearchAdd() {
            tableIns.reload({
                where: { //设定异步数据接口的额外参数，任意设
                    id: $("#id").val(),
                    name: $("#names").val(),
                    email: $("#emails").val(),
                    phone: $("#phones").val(),
                }
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            renderTable()
        };
        //导出
        $('#exports').on('click', function () {
            //原先分页limit
            var exportParams = {
                limit: 10000,
                beanName: $("#beanName").val()
            }
            CoreUtil.sendPost("/resume/list", exportParams, function (res) {
                //初始化渲染数据
                if (res.data.records != null) {
                    table.exportFile(tableIns.config.id, res.data.records, 'xls');
                }
            });
        });

        //返回
        $("#btn_cancel").click(function () {
            $(".table_div").show();
            $(".operation").hide();
            // $(".layui-cron").hide()
            return false;
        });

        //监听保存
        form.on('submit(submit)', function (data) {
            // $(".layui-cron").hide()
            if (data.field.id === undefined || data.field.id === null || data.field.id === "") {
                CoreUtil.sendPost("/resume/add", data.field, function (res) {
                    $(".table_div").show();
                    $(".operation").hide();
                    SearchAdd()
                });
            } else {
                CoreUtil.sendPut("/resume/update", data.field, function (res) {
                    $(".table_div").show();
                    $(".operation").hide();
                    // Search();
                });
            }

            return false;
        });


    })

    function openPdf(id) {
        console.log(id);
        layui.use('layer', function () {
            var layer = layui.layer;
            layer.open({
                // url: IP + '/resume/preview?authorization=' + tokenQuery,
                type: 2,
                area: ['800px', '650px'],
                fixed: false,
                // headers: {"authorization": token},
                maxmin: true,
                content: IP + 'resume/preview?authorization=' + tokenQuery + '&id=' + id
                // success: function (layero, index) {
                //     //向layer页面传值，传值主要代码
                //     var body = layer.getChildFrame('body', index);
                //
                //     //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                //     //var iframeWin = window[layero.find('iframe')[0]['name']];
                //
                //     //将弹窗页面中属性名name="fixure_id"的标签赋值
                //     body.find("[name='fixure_id']").val(data.fixure_id);
                // }
            })
        })
    }

</script>


</body>
</html>